<template>
  <div>
     <el-page-header content="间接成本预算">
       </el-page-header>
            <el-divider></el-divider>
    <div>
        <span>基本信息</span>
        <el-divider></el-divider>
        <el-form ref="form" :model="subcontracts"  style="width: 100%;" label-width="100px">
            <el-input v-model="subcontracts.i" hidden="" ></el-input>
          <el-container>
              <el-form-item label="预算编号">
    <el-input v-model="subcontracts.ysId"  readonly style="width: 280px;"></el-input>
  </el-form-item>
  <el-form-item label="预算主题">
    <el-input v-model="subcontracts.budgetName"   style="width: 280px;"></el-input>
  </el-form-item>
  <el-form-item label="项目名称">
    <el-input v-model="subcontracts.projectName" readonly style="width: 280px;"
                                  @focus="projectDialogVisible=true"></el-input>
                        <el-input v-model="subcontracts.pId" v-show="false"></el-input>
  </el-form-item>
          </el-container>
          <el-container>
  <el-form-item label="日期">
    <el-input v-model="subcontracts.createDate" type="date" readonly style="width: 280px;"></el-input>
  </el-form-item>
  <el-form-item label="填报人">
    <el-input v-model="subcontracts.name" readonly style="width: 280px;"
                                  @focus="empDialogVisible=true"></el-input>
                        <el-input v-model="subcontracts.eId" v-show="false"></el-input>
  </el-form-item>
  </el-container>
  <el-form-item label="备注">
    <el-input v-model="subcontracts.comment" type="textarea" style="width: 1420px;"></el-input>
  </el-form-item>
</el-form>
    </div>
      <multi-file-upload
                style="width: 90%;margin: 20px auto"
                title="附件"
                action="http://localhost/uploads"
                :params="{folder: 'subcontract'}"
                :headers="{token: token}"
                :show-button="!checkRoute"
                @uploadSuccess="handleUploadSuccess"
                :parent-file-list="fileList"
        ></multi-file-upload>
    <br>
    <div>
      <el-container>
      <span>直接成本预算明细</span>
      <el-button style="margin-left: 10px;" size="small" type="primary" @click="handleAddRow">增加一行</el-button>
      </el-container>
        <el-divider></el-divider>
        <el-table :data="tenderPurchaseDetails">
                    <el-table-column prop="index" v-if="false"></el-table-column>
                    <el-table-column label="" >
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.id" hidden=""></el-input>
                        </template>
                        </el-table-column>
                    <el-table-column label="费用项目" prop="subList">
                        <template slot-scope="scope">
                            <!-- <el-input v-model="scope.row.courseName" ></el-input> -->
                            <el-select v-model="scope.row.courseName"  >
                            <el-option
                                v-for="item in indirect" 
                                :key="item.value"
                                :label="item.iname"
                                :value="item.id">
                            </el-option>
                        </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column label="金额" prop="unit">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.money" @blur="money(scope.row)"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="金额大写" prop="workCount">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.moneyCapital" ></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="备注" prop="sumPrice">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.comment" ></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button  type="danger" @click="handleRemoveRow(scope.row)">删行</el-button>
                        </template>
                    </el-table-column>
                </el-table>
    </div>
    <el-divider></el-divider>
        <div style="width: 100%;margin-left: 90px">
            <el-button type="primary" @click="updateSubcontractTo" >确认提交</el-button>
        </div>

      <el-dialog
                title="项目选择"
                :visible.sync="projectDialogVisible"
                width="70%">
            <project-info-list @row="handleSetProject" v-if="projectDialogVisible"></project-info-list>
        </el-dialog>

        <el-dialog
                title="签订人选择"
                :visible.sync="empDialogVisible"
                width="70%">
            <emp-list @row="handleSetEmp" v-if="empDialogVisible"></emp-list>
        </el-dialog>
  </div>
</template>

<script>

import ProjectInfoList from '../common/projectInfo/ProjectInfoList.vue'
import EmpList from '../wyh/EmpList.vue'
import BudgetModel from '../../model/cyy/BudgetModel.js'
const em=new  BudgetModel()
export default {
  components: {
            ProjectInfoList,
            EmpList
        },
        props:['aa',"bb"],
    data() {
        return {
            subcontracts:JSON.parse(JSON.stringify(this.aa)),//分包合同数据
            active:1,
            fileList:[],
            projectDialogVisible: false,
            empDialogVisible:false,
            tenderPurchaseDetails:JSON.parse(JSON.stringify(this.bb)),
            indirect:[],
        }
    },
    computed: {
            token: {
                get() {
                    return this.$store.state.token
                }
            },
            checkRoute(){
                return Object.keys(this.$route.params).length != 0
            }
        },
    methods:{
      handleUploadSuccess(ids){
                this.subcontracts.attachIds = ids
            },
      //转换器
            toChies(values){//形参
                let len=values.length//统计出长度
                let arr=[];

                let chin_list=['零','壹','贰','叁','肆','伍','陆','柒','捌','玖']//所有的数值对应的汉字

                let chin_lisp=['仟','佰','拾','亿','仟','佰','拾','万','仟','佰','拾']//进制

                for(let i=0;i<len;i++){
                    arr.push(parseInt(values[i]));		//输入的数据按下标存进去   存进去的只是数字
                    arr[i]=chin_list[arr[i]]			//是根据我们输入的输入的数字，对应着我们的chin_list这个数组
                }//123['壹','佰','贰','拾','叁']

                for(let i=len-1,j=1;i>0;i--){//i =2	1		//倒序		为了添加进制，方便我们去观看
                    arr.splice(i,0,chin_lisp[chin_lisp.length-j++])	//j=2
                }
                console.log(arr)

                arr=arr.join('')
                if(len>=1){
                    arr+='元整'
                }
                return arr
            },
            //金额转换
            money(row){
                var money = row.money;
                var Maxmoney = this.toChies(money);
                console.log(Maxmoney)
               row.moneyCapital=Maxmoney
            },
      //添加一行
            handleAddRow() {
                this.tenderPurchaseDetails.push({
                    index: '',
                    courseName: '',
                    money: '',
                    comment: '',
                    moneyCapital: '',
                })
            },
            //删行
            handleRemoveRow(row) {
                this.tenderPurchaseDetails.splice(row.index, 1)
            },
    handleSetProject(row) {
      console.log(row.id);
                this.subcontracts.pId = row.id
                this.subcontracts.projectName = row.projectName
                this.projectDialogVisible = false
            },
            handleSetEmp(row){
      console.log(row.id);
                this.subcontracts.eId = row.id
                this.subcontracts.name = row.name
                this.empDialogVisible = false
    },
    updateSubcontractTo(){
            var a = {}
        a.subcontracts=this.subcontracts
        a.tenderPurchaseDetails=this.tenderPurchaseDetails
            this.$emit('updateSubcontractTo',a)
    },
    getIndirect(){
        em.getIndirect().then((response)=>{
            console.log(response.data.data);
            this.indirect=response.data.data
        })
    }
    },
    created(){
      this.getIndirect()
    }
}
</script>

<style>

</style>